import React, {useEffect, useState} from 'react';
import {Button, Card, Image, message, Popconfirm, Skeleton} from "antd";
import {MessageOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";
import classes from './index.module.scss'
import LikeButton from "../LikeButton";
import {useDispatch, useSelector} from "react-redux";
import {reqArticleIntro, reqDeleteMyArticle} from "../../../api/frontDesk/frontDeskApi";
import {getArticleIntro, updateArticleList} from "../../../store/frontDesk/articleSlice";
import '../../../style/global.scss'

const Article = (props) => {

    const [loading, setLoading] = useState(true)
    const {userAllInfo} = useSelector(state => state.persistedReducer.user)

    const dispatch = useDispatch()


    //加载文章
    useEffect(() => {
        if (props.article) {
            setTimeout(() => {
                setLoading(false)
            }, 200)
        }
    }, [props.article])
    //x按钮的确认事件
    const confirm = async (e) => {
        e.stopPropagation()
        if (props.onConfirm) {
            props.onConfirm(props.article.id)
        } else if (props.onDelete) {
            const result = await reqDeleteMyArticle({nickname: userAllInfo.nickname, article_id: props.article.id})
            if (result.status === 0) {
                dispatch(getArticleIntro())
                message.success('删除文章成功！')
            } else {
                message.error('删除文章成功!')
            }
        }
    }


    //x按钮的取消事件
    const cancel = (e) => {
        e.stopPropagation()
    }


    //点击文章进入文章界面
    const nav = useNavigate()
    const gotoArticle = () => {
        nav(`/article-content/${props.article.id}`)
    }
    const gotoArticleMessage = (e) => {
        e.stopPropagation()
        nav(`/article-content/${props.article.id}`, {state: {message: 'message'}})
    }

    const handleLinkClick = (e) => {
        e.stopPropagation()
    }


    return (
        <div>
            <Card
                title={<h3>{props.article.title}</h3>}
                extra={
                    <Popconfirm
                        description={"确认后将不会再出现该内容"}
                        onConfirm={confirm}
                        onCancel={cancel}
                        okText="确认"
                        cancelText="取消"
                        zIndex={1000}
                        title={"你确认要屏蔽该内容吗"}>
                        <Button onClick={(e) => e.stopPropagation()} size={"large"} type={"link"}>x</Button>
                    </Popconfirm>
                }
                hoverable
                style={{width: 600, marginTop: 15}}
                actions={[
                    <div style={{width: 300}} onClick={(e) => handleLinkClick(e)}>
                        <LikeButton praise={props.article.praise} article_id={props.article.id}/>
                    </div>,
                    <div onClick={gotoArticleMessage}>
                        <div style={{position: 'absolute', left: 160, bottom: 2}}>
                            {props.children}
                        </div>
                        <MessageOutlined key={"message"}/>
                    </div>
                ]}
                onClick={gotoArticle}
            >
                <div className={classes.Intro}>
                    <Skeleton loading={loading} style={{marginRight: 20}} paragraph={{rows: 2}} active>
                        <div className={classes.Meta}>
                            <div style={{display: "flex", justifyContent: "space-between"}}>
                                <h3 className={classes.Sort}>作者：{props.article.author_name}</h3>
                                <span className={classes.Sort}>{props.article.sort}</span>
                            </div>
                            <span className={classes.Describe}>{props.article.describe}</span>
                        </div>
                        {
                            props.article.cover &&
                            <Image
                                className={classes.Image}
                                preview={false}
                                src={props.article.cover}
                            />
                        }

                    </Skeleton>
                </div>
            </Card>
        </div>
    );
};

export default Article;